import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: const Text('button')),
      body: const MyAppBody(),
    ));
  }
}

class MyAppBody extends StatelessWidget {
  const MyAppBody({super.key});

  @override
  Widget build(BuildContext context) {
    return const MyInput();
  }

  Widget inputContent() {
    return Column(
      children: [
        TextField(onChanged: (val) {
          print(val);
        })
      ],
    );
  }
}

class MyInput extends StatefulWidget {
  const MyInput({super.key});

  @override
  State<MyInput> createState() => _MyInputState();
}

class _MyInputState extends State<MyInput> {
  final formKey = GlobalKey<FormState>();
  String username = '';
  String password = '';
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // textFieldDemo(),
            const SizedBox(
              height: 10,
            ),
            formDemo()
          ],
        ));
  }

  Widget formDemo() {
    return Form(
        key: formKey,
        child: Column(
          children: [
            formItemUserDemo(),
            formItemPassDemo(),
            const SizedBox(
              height: 20,
            ),
            buttonDemo()
          ],
        ));
  }

  Widget formItemUserDemo() {
    return TextFormField(
      initialValue: username,
      decoration: const InputDecoration(
          prefixIcon: Icon(Icons.people), hintText: '请输入用户名'),
      onChanged: (val) {
        setState(() {
          username = val;
        });
        formKey.currentState!.validate();
      },
      validator: (value) {
        if (value!.isEmpty) {
          return '请输入用户名';
        }
        return null;
      },
    );
  }

  bool lookEye = true;
  Widget formItemPassDemo() {
    return TextFormField(
      obscureText: lookEye,
      initialValue: password,
      decoration: InputDecoration(
          prefixIcon: const Icon(Icons.lock_outline_sharp),
          hintText: '请输入密码',
          suffix: IconButton(
              onPressed: () {
                setState(() {
                  lookEye = !lookEye;
                });
              },
              icon: Icon(lookEye
                  ? Icons.remove_red_eye_rounded
                  : Icons.remove_red_eye_outlined))),
      onChanged: (val) {
        setState(() {
          password = val;
        });
        formKey.currentState!.validate();
      },
      validator: (value) {
        if (value!.isEmpty) {
          return '请输入密码';
        }
        return null;
      },
    );
  }

  Widget buttonDemo() {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded(
            child: ElevatedButton(
          onPressed: () {
            bool flag = formKey.currentState!.validate();
            if (flag) {
              print('$username : $password');
            }
          },
          style: ElevatedButton.styleFrom(
              backgroundColor: const Color.fromARGB(255, 250, 162, 30)),
          child: const Text('登录'),
        ))
      ],
    );
  }
}
